<template>
  <div class="container">
    <div class="left">
      <Step @click="handleClick" :list="list" />
    </div>
    <div class="right" @scroll="handleScroll" ref="scrollWrap">
      <div v-for="(item, index) in list" :key="index" :ref="item.name">
        <h1 class="title">{{ item.text }}</h1>
        <div class="content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Step from "./HelloWorld.vue";
import _ from "lodash";
export default {
  components: {
    Step,
  },
  props: {},
  data() {
    return {
      list: [
        { text: "测试1", name: "test1", active: true, disabled: false },
        { text: "测试2", name: "test2", active: false, disabled: false },
        { text: "测试3", name: "test3", active: false, disabled: false },
        { text: "测试4", name: "test4", active: false, disabled: false },
        { text: "测试5", name: "test5", active: false, disabled: true },
      ],
      stopResponding: false,
    };
  },
  mounted() {},
  methods: {
    handleScroll: _.throttle(function () {
      if (this.stopResponding) return;
      this.findActive();
    }, 200),
    findActive() {
      let scrollWrapHeight = this.$refs.scrollWrap.offsetHeight;
      console.log("height>>>>>>>>>>", scrollWrapHeight);
      this.list.forEach((item, activeIndex) => {
        let offsetTop = this.$refs[item.name][0].offsetTop;
        let scrollTop = this.$refs.scrollWrap.scrollTop;
        console.log("top>>>>>>>>>", item.text, offsetTop - scrollTop);
        if (offsetTop - scrollTop <= (scrollWrapHeight / 3) * 2) {
          console.log("============>", item, activeIndex);
          this.list = this.list.map((item, index) => ({
            ...item,
            active: index === activeIndex,
          }));
        }
      });
    },
    handleClick({ activeIndex, name }) {
      this.list = this.list.map((item, index) => ({
        ...item,
        active: index === activeIndex,
      }));
      let top = this.$refs[name][0].offsetTop;
      this.stopResponding = true;
      this.animate(this.$refs.scrollWrap, top, () => {
        this.stopResponding = false;
      });
    },
    animate(ele, target, callback) {
      //要用定时器，先清定时器
      //一个萝卜一个坑儿，一个元素对应一个定时器
      clearInterval(ele.timer);
      //定义定时器
      ele.timer = setInterval(() => {
        //获取步长
        //步长应该是越来越小的，缓动的算法。
        var step = (target - ele.scrollTop) / 10;
        //对步长进行二次加工(大于0向上取整,小于0项下取整)
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        //动画原理： 目标位置 = 当前位置 + 步长
        ele.scrollTop = ele.scrollTop + step;
        //检测缓动动画有没有停止
        // console.log(1);
        if (Math.abs(target - ele.scrollTop) <= Math.abs(step)) {
          //处理小数赋值
          ele.scrollTop = target;
          clearInterval(ele.timer);
          if (typeof callback === "function") {
            callback();
          }
        }
      }, 17);
    },
  },
};
</script>

<style scoped>
.container {
  /* background-color: #eee; */
  display: flex;
  height: 100%;
  /* height: 1000px; */
}
.left {
  width: 200px;
  height: 100%;
}
.right {
  flex: 1;
  overflow-y: auto;
}
.content {
  height: 500px;
}
</style>
